<!DOCTYPE html>
<html lang="ch">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=divice-width, user-scalable=no">
	<!--script src="http://js.seventop.top/?ccpirahead.js"></script-->
    <link rel="icon" type="image/x-icon" href="http://seventop.top/img/ico/formal/110-128.ico" />
	<title>绝赞超美丽3D图像展示网站 -By CCPIRA</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		body {
			font-size: 1em;
		}
		#chh {
			width: 4cm;
			margin-left: 3.5cm;
		}
		#_vw {
		}
	</style>
	<script type="text/javascript">
		View = {
			_win: false,
			_sxy: {
				x: 0,
				y: 0,
				rx: 0,
				rz: 0
			},
			_onzoom: 1,
			_stzoom: 1,
			_hold: 0,
			_onmove: 0,
			resetwin() {
				this.CS = (this._win.height + this._win.width) / 4 * Math.sqrt(2);
				this.H = this._win.height / 2;
				this.W = this._win.width / 2;
				this.zoom = 1000;
			},
			response: 150,
			set win(n) {
				this._win = n;
				n.addEventListener("touchstart", function(e) {
					if(e.targetTouches.length == 1) {
						window.clearInterval(Tm)
						var e = e.changedTouches[0];
						View._sxy = {x: e.pageX, y: e.pageY, rx: View.rx, rz: View.rz};
						View._onmove = 1;
					} else {
						View._stzoom = View.zoom;
						View._onzoom = Math.sqrt(Math.pow(e.targetTouches[0].pageX - e.targetTouches[1].pageX, 2) + Math.pow(e.targetTouches[0].pageY - e.targetTouches[1].pageY, 2)) / View.response * 100;
						View._onmove = 0;
					}
				});
				n.addEventListener("touchmove", function(e) {
					if(View._onmove) {
						var e = e.changedTouches[0];
						View.rz = View._sxy.rz - (View._sxy.x - e.pageX) / View.CS * View.response;
						View.rx = View._sxy.rx - (View._sxy.y - e.pageY) / View.CS * View.response;
					} else {
						View.zoom = View._stzoom + View._onzoom - Math.sqrt(Math.pow(e.targetTouches[0].pageX - e.targetTouches[1].pageX, 2) + Math.pow(e.targetTouches[0].pageY - e.targetTouches[1].pageY, 2)) / View.response * 100;
					}
				});
				n.onmousedown = function() {
					window.clearInterval(Tm)
					var event = event || window.event;
					View._sxy = {x: event.clientX, y: event.clientY, rx: View.rx, rz: View.rz};
					View._hold = 1
				}
				n.onmousemove = function() {
					if(View._hold) {
						var event = event || window.event;
						View.rz = View._sxy.rz - (View._sxy.x - event.clientX) / View.CS * View.response;
						View.rx = View._sxy.rx - (View._sxy.y - event.clientY) / View.CS * View.response;
					}
				}
				n.onmouseup = function() {
					View._hold = 0;
				}
				this.resetwin();
				n.onresize = this.resetwin;
			},
			get win() {
				return this._win;
			},
			x: 0,
			y: 0,
			z: 0,
			_zoom: 1,
			_fakezoom: 0,
			set zoom(n) {
				if(n < 0.001) n = 0.001
				this._fakezoom = n;
				this._zoom = this._win.width / n;
				this.draw();
			},
			get zoom() {
				return this._fakezoom;
			},
			_rz: 0,
			club: [[1, 0], [1, 0], [[0, 0], [0, 1]]],
			set rz(n) {
				if (this._rz == n) return;
				this._rz = n;
				var x = ((n / 360) % 1) * Math.PI, c=Math.sin(x), n = 2 * c, a=Math.cos(x), x = 1 - n * c, h = n * a;
				this.club[0] =[x, h];
				this.club[2] = [
					[h * this.club[1][1], - x * this.club[1][1]],
					[- h * this.club[1][0], x * this.club[1][0]]
				];
				this.draw();
			},
			get rz() {
				return this._rz;
			},
			_rx: 0,
			set rx(n) {
				if(n>90) n=90;
				else if(n<-90) n=-90;
				if (this._rx == n) return;
				this._rx = n;
				var x = n / 360 * Math.PI, b=Math.sin(x), n = 2 * b, a=Math.cos(x), x = 1 - n * b, h = n * a;
				this.club[1] =[x, h];
				this.club[2] = [
					[h * this.club[0][1], - h * this.club[0][0]],
					[- x * this.club[0][1], x * this.club[0][0]]
				];
				this.draw();
			},
			get rx() {
				return this._rx;
			},
			_vf: 60,
			set VF(n) {
				this._vf = n;
				this._PRatio = this._cs / Math.tan(n * Math.PI / 360);
				this.draw();
			},
			get VF() {
				return this._vf;
			},
			_cs: 10,
			set CS(n) {
				this._cs = n;
				this._PRatio = n / Math.tan(this._vf * Math.PI / 360);
				this.draw();
			},
			get CS() {
				return this._cs;
			},
			_PRatio: 10 / Math.tan(60 * Math.PI / 360),
			random: function(n) {
				switch(n) {
					case 0:
						return this.usablor[Math.floor(Math.random() * this.usablor.length)];
				}
			},
			usablor: [
				"#000",
				"#00f",
				"#070",
				"#f00"
			],
			rotate: function(n) {
				n.tx = n.y - this.y;
				n.ty = n.z - this.z;
				n.tz = n.x - this.x;
				return {
					x: n.tx * this.club[0][0] + n.tz * this.club[0][1],
					y: n.tx * this.club[2][0][0] + n.ty * this.club[1][0] + n.tz * this.club[2][0][1],
					z: n.tx * this.club[2][1][0] + n.ty * this.club[1][1] + n.tz * this.club[2][1][1],
					size: n.size
				};
			},
			flatten: function(n) {
				if (n.z >= this._PRatio) return 0;
				var c = this._PRatio / (this._PRatio - n.z) * this._zoom, t, e = 1;
				t = this.W + n.x * c;
				c = this.H - n.y * c;
				if (t - n.size > this._win.width || t < - n.size) e = 0;
				else if (c - n.size > this._win.height ||c < - n.size) e = 0;
				return {
					x: t,
					y: c,
					e: e
				};
			},
			draw: function() {
				var i;
				this.win.height = this.win.height;
				var cxt = this._win.getContext("2d");
				for (i in this.Point.list) this.Point.limCalc(i);
				for (i in this.Line.list) this.Line.limDraw(i, cxt);
				for (i in this.Point.list) this.Point.limDraw(i, cxt);
			},
			Point: {
				new: function() {
					var i, j, n;
					for(j = 0; j < arguments.length; j++) {
						var n = arguments[j];
						for (i in this.default) if(typeof n[i] == "undefined") n[i] = this.default[i];
						if(n.color == "") n.color = View.random(0);
						if(n.name == "") {
							n.name = 0;
							for (i in this.list) n.name++;
						}
						this.list[n.name] = n;
						this.limCalc(n.name);
						this.limDraw(n.name, View._win.getContext("2d"));
					}
				},
				default: {
					name: "",
					tag: "",
					color: "",
					size: 10,
					shape: 0,
					visible: 1,
					x: 0,
					y: 0,
					z: 0,
					tx: 0,
					ty: 0,
					tz: 0,
					display: {
						x: 0,
						y: 0,
						e: 0
					}
				},
				limCalc: function(n) {
					this.list[n].display = View.flatten(View.rotate(this.list[n]));
				},
				limDraw: function(n, cxt) {
					if (this.list[n].display.e && this.list[n].visible) {
						switch(this.list[n].shape) {
							case 0:
								cxt.beginPath();
								cxt.arc(this.list[n].display.x, this.list[n].display.y, this.list[n].size, 0, 2 * Math.PI, false);
								cxt.fillStyle = this.list[n].color;
								cxt.fill();
								cxt.closePath();
								break;
						}
					}
				},
				list: {}
			},
			Line: {
				new: function() {
					var i, j, n;
					for (j = 0; j < arguments.length; j++) {
						n = arguments[j];
						for (i in this.default) if (typeof n[i] == "undefined") n[i] = this.default[i];
						n.color = (n.color == "" ? View.random(0) : n.color);
						if(n.name == "") {
							n.name = 0;
							for (i in this.list) n.name++;
						}
						this.list[n.name] = n;
						var cxt = View._win.getContext("2d");
						this.limDraw(n.name, cxt);
					}
				},
				default: {
					name: "",
					color: "",
					size: 5,
					shape: 0,
					way: []
				},
				limDraw: function(n, cxt) {
					if(this.list[n].way.length < 2) return;
					var dq = this.list[n], c;
					switch(dq.shape) {
						case 0:
							cxt.fillStyle = dq.color;
							cxt.strokeStyle = dq.color;
							cxt.lineWidth = 0;
							var s = dq.size / 2, p = 2 * Math.PI, i, c = [];
							for (i = 0; i < dq.way.length; i++) {
								c[i] = ((typeof dq.way[i] == "object") ? View.flatten(View.rotate(dq.way[i])) : View.Point.list[dq.way[i]].display);
								cxt.beginPath();
								cxt.arc(c[i].x, c[i].y, s, 0, p, false);
								cxt.fill();
								cxt.closePath();
							}
							cxt.beginPath();
							cxt.closePath();
							cxt.lineWidth = dq.size;
							cxt.moveTo(c[0].x, c[0].y);
							for (i = 1; i < dq.way.length; i++) {
							cxt.moveTo(c[i-1].x, c[i-1].y);
								cxt.lineTo(c[i].x, c[i].y);
							}
							cxt.stroke();
							break;
					}
				},
				list: {}
			},
			exp: {}
		};
		function _resetui() {
			/*if(2 * window.innerWidth >= 3 * window.innerHeight) {
				_h = window.innerHeight;
				_w = window.innerWidth * 2 / 3;
			} else {*/
				_h = window.innerHeight / 2 * 1.5;
				_w = window.innerWidth;
			//}
			_vw.height = _h;
			_vw.width = _w;
		}
		window.onload = function() {
			_resetui();
			View.win = _vw;
			/*chh.addEventListener("touchstart", function(e) {
				var e = e.changedTouches[0];
				con1.innerHTML = [e.pageX, e.pageY]
			})
			window.addEventListener("touchmove", function(e) {
				var e = e.changedTouches[0];
				con2.innerHTML = [e.pageX, e.pageY]
			});
			{
				var ns = document.body.querySelectorAll(".MavCSS-sliderbar");
				for(var i = 0; i < ns.length; i++) {
					ns[i].style.cssText += ";background: #ccc;";
				}
			}
			con2.innerHTML=chh.value*/
			window.onresize = _resetui;
			{/*
				_cxt = _vw.getContext("2d");
				_cxt.moveTo(0, 0);
				_cxt.lineTo(_w, _h);
				_cxt.stroke();
			*/}
			Tm = setInterval(function() {View.rz += 0.25}, 20)
			
			
			var no = 0, x0 = 0, y0 = 0, z0 = 0, cl = "#cce",sz1 = 15, sz2 = 15, b = 250, d = (Math.sqrt(5) + 1) / 4 * b, j = Math.sqrt(Math.sqrt(5) + 1),h = Math.sqrt(Math.sqrt(5) - 1), g = Math.sqrt(10 * Math.sqrt(5)) / 10 * b, k = Math.sqrt(5) * Math.sqrt(2 * Math.sqrt(5) + 5) / 10 * b;
			View.Point.new({
				name: 'A'+no,
				x: x0,
				y: y0,
				z: z0 + g * (h + j / 2),
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'I'+no,
				x: x0,
				y: y0,
				z: z0 - g * (h + j / 2),
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'R'+no,
				x: x0 + d,
				y: y0 + g * h / 2,
				z: z0 + g * j / 2,
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'E'+no,
				x: x0 - d,
				y: y0 + g * h / 2,
				z: z0 + g * j / 2,
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'F'+no,
				x: x0 + d,
				y: y0 - g * h / 2,
				z: z0 - g * j / 2,
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'H'+no,
				x: x0 - d,
				y: y0 - g * h / 2,
				z: z0 - g * j / 2,
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'G'+no,
				x: x0,
				y: y0 + g * j,
				z: z0 + g * j / 2,
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'J'+no,
				x: x0,
				y: y0 - g * j,
				z: z0 - g * j / 2,
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'D'+no,
				x: x0 + b / 2,
				y: y0 - k,
				z: z0 + g * j / 2,
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'B'+no,
				x: x0 - b / 2,
				y: y0 - k,
				z: z0 + g * j / 2,
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'K'+no,
				x: x0 + b / 2,
				y: y0 + k,
				z: z0 - g * j / 2,
				color: cl,
				size: sz1,
				visible: 0
			},{
				name: 'L'+no,
				x: x0 - b / 2,
				y: y0 + k,
				z: z0 - g * j / 2,
				color: cl,
				size: sz1,
				visible: 0
			});
			View.Line.new({
				way: (['I', 'F', 'K', 'I', 'J', 'H', 'I', 'L', 'K']).map(x => x + no),
				color: cl,
				size: sz2
			},{
				way: (['F', 'J', 'D', 'F', 'R', 'K', 'G', 'L', 'E', 'G', 'E', 'H', 'L']).map(x => x + no),
				color: cl,
				size: sz2
			},{
				way: (['A', 'G', 'R', 'A', 'D', 'R']).map(x => x + no),
				color: cl,
				size: sz2
			},{
				way: (['H', 'B', 'E', 'A', 'B', 'J']).map(x => x + no),
				color: cl,
				size: sz2
			},{
				way: ['B'+no, 'D'+no],
				color: cl,
				size: sz2
			});
			R = 400;
			P = 50;
			function rp() {
				var a = Math.random() * Math.PI * 2 - Math.PI, b = Math.asin(Math.random() * 2 - 1), r = Math.random() * (P + 1) + R - P / 2;
				var ca = Math.cos(a), sa = Math.sin(a), cb = Math.cos(b), sb = Math.sin(b);
				return {
					x: r * ca * cb,
					y: r * sa * cb,
					z: r * sb,
					color: "rgba(" + [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.random() * 0.7 + 0.3] +")"
				};
			}
			for (var i=0; i<300; i++) View.Point.new(rp())
			for (var no = 1; no < 25; no++) {
			var sp = rp(), x0 = sp.x, y0 = sp.y, z0 = sp.z, cl = "rgba(" + [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.random() * 0.7 + 0.3] +")",sz1 = 5, sz2 = 5, b = Math.floor(Math.random() * 76) + 10, d = (Math.sqrt(5) + 1) / 4 * b, j = Math.sqrt(Math.sqrt(5) + 1),h = Math.sqrt(Math.sqrt(5) - 1), g = Math.sqrt(10 * Math.sqrt(5)) / 10 * b, k = Math.sqrt(5) * Math.sqrt(2 * Math.sqrt(5) + 5) / 10 * b;
			View.Point.new({
				name: 'A'+no,
				x: x0,
				y: y0,
				z: z0 + g * (h + j / 2),
				color: cl,
				size: sz1
			},{
				name: 'I'+no,
				x: x0,
				y: y0,
				z: z0 - g * (h + j / 2),
				color: cl,
				size: sz1
			},{
				name: 'R'+no,
				x: x0 + d,
				y: y0 + g * h / 2,
				z: z0 + g * j / 2,
				color: cl,
				size: sz1
			},{
				name: 'E'+no,
				x: x0 - d,
				y: y0 + g * h / 2,
				z: z0 + g * j / 2,
				color: cl,
				size: sz1
			},{
				name: 'F'+no,
				x: x0 + d,
				y: y0 - g * h / 2,
				z: z0 - g * j / 2,
				color: cl,
				size: sz1
			},{
				name: 'H'+no,
				x: x0 - d,
				y: y0 - g * h / 2,
				z: z0 - g * j / 2,
				color: cl,
				size: sz1
			},{
				name: 'G'+no,
				x: x0,
				y: y0 + g * j,
				z: z0 + g * j / 2,
				color: cl,
				size: sz1
			},{
				name: 'J'+no,
				x: x0,
				y: y0 - g * j,
				z: z0 - g * j / 2,
				color: cl,
				size: sz1
			},{
				name: 'D'+no,
				x: x0 + b / 2,
				y: y0 - k,
				z: z0 + g * j / 2,
				color: cl,
				size: sz1
			},{
				name: 'B'+no,
				x: x0 - b / 2,
				y: y0 - k,
				z: z0 + g * j / 2,
				color: cl,
				size: sz1
			},{
				name: 'K'+no,
				x: x0 + b / 2,
				y: y0 + k,
				z: z0 - g * j / 2,
				color: cl,
				size: sz1
			},{
				name: 'L'+no,
				x: x0 - b / 2,
				y: y0 + k,
				z: z0 - g * j / 2,
				color: cl,
				size: sz1
			});
			View.Line.new({
				way: (['I', 'F', 'K', 'I', 'J', 'H', 'I', 'L', 'K']).map(x => x + no),
				color: cl,
				size: sz2
			},{
				way: (['F', 'J', 'D', 'F', 'R', 'K', 'G', 'L', 'E', 'G', 'E', 'H', 'L']).map(x => x + no),
				color: cl,
				size: sz2
			},{
				way: (['A', 'G', 'R', 'A', 'D', 'R']).map(x => x + no),
				color: cl,
				size: sz2
			},{
				way: (['H', 'B', 'E', 'A', 'B', 'J']).map(x => x + no),
				color: cl,
				size: sz2
			},{
				way: ['B'+no, 'D'+no],
				color: cl,
				size: sz2
			});
			}
		}
	</script>
</head>

<body>
	<h1>（可以用手拖动）</h1>
	<canvas id="_vw"></canvas>
	<div id=tdiv>
		<div class="MavCSS-sliderbar" id="chh" value=5></div>
		<h1 id="con1">视角: 60 度</h1>
		<input type="range" min=0 max=180 step=1 value=60 oninput="View.VF = this.value;con1.innerText = '视角: ' + this.value + ' 度'" style="width: 100%"/>
		<br /><br /><br /><br />
		<h1 id="con2">45</h1>
		<input type="range" min=0 max=2000 step=10 value=0 oninput="View.zoom = this.value;con2.innerText = this.value" style="width: 100%"/>
	</div>
</body>

</html>
